<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>tl-spb-blog-后台添加配置</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="../lib/axios.js"></script>
    <script src="../lib/layui/layui.js" v="layui" e="layui"></script>
    <link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css" />
</head>
<style>
    input {
        color: darkorchid;
        font-weight: 700;
    }
    .tl-ops-web-api-form-span{
        margin-left: -20px;
        position: relative;
        top: 3px;
        margin-right: 15px;
    }
    .prefix{
        max-width: 40%;
        border-radius: 5px;
    }
    #prefix{
        margin-top: 10px;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #918576;
        font-weight: bold;
    }
    #url{
        width: 100%;
        margin-left: 1%;
    }
</style>
<body>

    <div class="layui-form" lay-filter="tl-ops-web-api-form" id="tl-ops-web-api-form" style="padding: 20px 20px 0 0;">
        <div class="layui-form-item" style="display: none;">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-block">
                <input type="text" name="id" id="id" placeholder="请输入ID" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block" id="tl-api-type" onmouseleave="tl_mouse_leave_tips()" onmouseenter="tl_mouse_enter_tips('tl-api-type','支持接口类型，静态资源类型（需要结合页面代理插件一起配置使用）')">
                <input type="radio" name="api_type" class="layui-input" value="api"><span class="tl-ops-web-api-form-span">API接口</span>
                <input type="radio" name="api_type" class="layui-input" value="page"><span class="tl-ops-web-api-form-span">静态资源</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">域名</label>
            <div class="layui-input-block">
                <input type="text" name="host" id="host" maxlength="100" placeholder="请输入域名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">虚拟前缀</label>
            <div class="layui-input-block" >
                <input lay-verify="fake_prefix" type="text" name="fake_prefix" id="fake_prefix" maxlength="100" placeholder="虚拟前缀" class="layui-input" 
                    onmouseleave="tl_mouse_leave_tips()" onmouseenter="tl_mouse_enter_tips('fake_prefix','默认为空，如果指定虚拟前缀，那么匹配的API规则将会转发到对应节点的路径下')">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">API</label>
            <div class="layui-input-block" style="display: flex;">
                <div class="prefix"><div id="prefix"></div></div>
                <input type="text" name="url" id="url" maxlength="100" placeholder="请输入API" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">匹配模式</label>
            <div class="layui-input-block" id="tl-tips-mode" onmouseleave="tl_mouse_leave_tips()"
                onmouseenter="tl_mouse_enter_tips('tl-tips-mode','API路径根据什么模式进行匹配')">
                <input type="radio" name="match_mode" class="layui-input" value="jo"><span class="tl-ops-web-api-form-span">正则</span>
                <input type="radio" name="match_mode" class="layui-input" value="joi"><span class="tl-ops-web-api-form-span">正则不区分大小写</span>
                <input type="radio" name="match_mode" class="layui-input" value="joid"><span class="tl-ops-web-api-form-span">正则最长字符串匹配</span>
                <input type="radio" name="match_mode" class="layui-input" value="all"><span class="tl-ops-web-api-form-span">全文匹配</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">API重定向</label>
            <div class="layui-input-block" >
                <input type="text" name="rewrite_url" id="rewrite_url" maxlength="100" placeholder="API重定向地址" autocomplete="off" class="layui-input" 
                    onmouseleave="tl_mouse_leave_tips()" onmouseenter="tl_mouse_enter_tips('rewrite_url','默认为空，如有需要可填写，会将匹配的API重写至此API')">
            </div>
        </div>

        <div class="layui-form-item" id="tl-ops-web-api-form-service-view"></div>
        <script id="tl-ops-web-api-form-service-tpl" type="text/html">
            {{#  if(d.length === 0) { }}
            <label class="layui-form-label">服务</label>
            <div class="layui-input-block">
                <p style="line-height: 37px;">暂无服务</p>
            </div>
            {{#  } else { }}
            <label class="layui-form-label">服务</label>
            <div class="layui-input-block">
                <select name="service" lay-verify="tl-ops-web-api-form-service" id="tl-ops-web-api-form-service">
                    <option value="">请选择服务</option>
                {{#  layui.each(d, function(index, service){ }}
                    <option value="{{index}}">{{index}}</option>
                {{#  }); }}
                </select> 
            </div>
            {{#  } }}
        </script>

        <div class="layui-form-item" id="tl-ops-web-api-form-service-node-view"></div>
        <script id="tl-ops-web-api-form-service-node-tpl" type="text/html">
            {{#  if(d.length === 0) { }}
            <label class="layui-form-label">节点</label>
            <div class="layui-input-block">
                <p style="line-height: 37px;">暂无节点</p>
            </div>
            {{#  } else { }}
            <label class="layui-form-label">节点</label>
            <div class="layui-input-block">
                <select name="node" lay-verify="tl-ops-web-api-form-service-node" id="tl-ops-web-api-form-service-node">
                    <option value="">请选择节点</option>
                {{#  layui.each(d, function(index, node){ }}
                    <option value="{{index}}">{{node.name}}:{{node.protocol}}:{{node.ip}}:{{node.port}}</option>
                {{#  }); }}
                </select> 
            </div>
            {{#  } }}
        </script>

        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="tl-ops-web-api-form-submit" id="tl-ops-web-api-form-submit" value="确认">
        </div>
    </div>

    <script src="../lib/tl_ops_web_comm.js"></script>
    <script src="tl_ops_web_api_form.js"></script>
    <script>
        layui.use(['laytpl', 'form', 'layedit'], tl_ops_web_api_form_main);
    </script>
</body>

</html>